<template>
  <div id="route">
     <!-- 导航栏 -->
     <div id="route">
        <nav-bar class="routeNav">
            <div slot="left" class="backButton" @click="back"><img src="@/assets/img/message/backButton.svg" alt=""></div>
            <div slot="center" class="LogoWrapper">
              <img id="fishLogo" src="~assets/img/logo/fishLogo.png" alt="游出我的范">
              <span class="mine">我的路线</span>
            </div>
        </nav-bar>
        <div class="routesWapper" v-show="!showDetail">
          <div v-for="item in routes" :key="item.id" class="routeItem" @click="routeClick(_,item)">
            <div class="name">
              <div>路线名称：{{ item.routeName }}</div>
              <div>景点总数：{{ item.scenicDtoList.flat().length }}</div>
            </div>
            <div class="brief">{{ item.brief }}</div>
          </div>
        </div>
        <div class="routesDetail" v-show="showDetail">
          <h2>{{ route.routeName }}</h2>
          <div>路线简介：{{ route.brief }}</div>
          <div><span>总花销：</span><span class="price">{{ route.totalPrice }}元</span></div>
          <div v-for="(day,i) in route.scenicDtoList" :key="i" >
            <div class="hotelInf">
              <div>day{{ i+1 }}</div>
              <div v-if="i !== route.scenicDtoList.length - 1">
                <span>入住酒店：{{ day[day.length-1].hotelName + ' '}}</span>
                <span>价格：</span><span class="price">{{ day[day.length-1].hotelPrice }}元</span>
              </div>
            </div>
            <div class="dayItem">
              <div class="scenicItem"  v-if="i === 0">
                <div class="scenicInf">
                  <div>家</div>
                  <div>
                    <img src="~assets/img/tabbar/home.svg"/>
                  </div>
                </div> 
              </div>
              <div class="scenicItem" v-for="(scenic,i) in day" :key="i">
                <div class="line">
                    <div>{{ changeMode(scenic.transportMode) }}</div>
                    <div>>>>>>></div>
                    <div class="price">{{ scenic.transportPrice }}元</div>
                </div>
                <div class="scenicInf">
                  <div>{{ scenic.scenicName }}</div>
                  <div>
                    <img :src="scenic.scenicImage[0]"/>
                  </div>
                  <div><span>门票：</span><span class="price">{{ scenic.scenicPrice }}元</span></div>
                </div> 
              </div>
            </div>
            </div>
          </div>
        </div>
       <div class="detailBottomDetele" v-show="showDetail" @click="routeDelete">删除路线</div>

    </div>
</template>

<script>
  import { getScenicRoute,deleteRoute } from '@/network/home'
  import NavBar from "components/common/navbar/NavBar";

  export default {
    name: "route",
    components:{
      NavBar,
    },
    data() {
      return {
        routes:[],
        route:{},
        showDetail: false,
        recommendationInf: {}
      }
    },
    mounted(){
      this.getRoute()
      if(this.$route.query) {
        this.recommendationInf = this.$route.query
        this.showDetail = true
      }
    },
    methods:{
    routeClick(_,item){
      this.route = item
      this.showDetail = true
      console.log(item);
    },
    async routeDelete(){
      const routeId = this.route.id
      await deleteRoute(routeId)
      this.$message({
          type: 'success',
          message: '删除成功!'
      });
      this.getRoute()
      this.showDetail = false
      this.$router.back()
    },
     // 获取所有路线
    async getRoute () {
      const { data: { data: res } } = await getScenicRoute(1,6,9)
      this.routes = res
    },
    back () {
        if(this.showDetail) this.showDetail = false
        else this.$router.back()
      },
    changeMode(mode){
      switch(mode){
        case 0:
          return '步行';
        case 1:
          return '骑行';
        case 2:
          return '驾车';  
        case 3:
          return '火车';  
        case 4:
          return '高铁';  
        case 5:
          return '地铁';  
        case 6:
          return '飞机';  
          // 当 expression 不等于上述任何值时执行的代码
      }
    }
    },
  }
</script>

<style scoped>
/* 回退按钮样式 */
  .routeNav{
      background-color: #11dff1;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 9;
    }
  .LogoWrapper{
    height: 44px;
    display: flex;
    justify-content: center;
  }
  .backButton img {
      height: 20px;
      width: 20px;
      display: inline-block;
      vertical-align: middle;
  }
  .mine{
    font-size: 18px;
    color: #fff;
    margin: 2px 0 0 5px;
  }
  #fishLogo{
    height: 80%;
    margin-top: 4px;
  }

  .routesWapper{
    width: 100%;
    position: absolute;
    top: 44px;
  }

  .routesDetail{
    width: 100%;
    position: absolute;
    top: 44px;
    text-align: center;
  }

  .routeItem {
    height: 5rem;
    background-color: #f5f5f5;
    margin: 0.5rem;
    border: 1px solid #9999b2;
    border-radius: 5px;
    display: flex;
    position: relative;
  }

  .scenicCard{
    flex: 1;
  }

.name{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 4px;
}

.brief {
    flex: 1;
    background-color: #e2e2e2;
    font-size: 0.85rem;
    border-radius: 5px;
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    /* 设置多行溢出显示省略号 */
    overflow: hidden;
    display: -webkit-box;
    word-break:break-all ;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.125rem;
}
/* 价钱样式 */
.price{
  color: red;
}
/* 酒店信息 */
.hotelInf{
  display: flex;
  justify-content: space-around;
}

.dayItem{
  display: flex;
  flex-wrap: wrap;
  /* background-color: rgb(214, 208, 208); */
  border: 3px solid #11dff1;
  border-radius: 10px;
}

.scenicItem{
  display: flex;
  flex-basis: calc(50% - 10px); /* 设置列宽为一半，减去间距 */
  margin: 5px; /* 设置列间距 */
  padding: 10px;
  box-sizing: border-box;
  align-items: center;

}

.scenicInf{
 flex: 2;
}

.scenicItem img{
  width: 100%;
  height: 50px;
}
.line{
  flex: 1;
  margin-right: 10px;
}

.detailBottomDetele {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  font-size: large;
  padding-top: 15px;
  color: white;
  background-color: red;
}
</style>
